<template>
	<view style="padding: 25rpx;">
		
		<view class="userlist">
			<block v-for="(m,index) in members" :key="index">
				<ul v-if="isin==1 || m.type=='owner' || m.type=='manager'"
					:class="{'admintools':isOwner==1 || is_manager==1}">
					<li>
						<image  :src="imgshow(m.avatar)" @tap="lookMember(m)"></image>
					</li>
					<li v-if="!m.nameset">
						<span class="btn_yellow" v-if="m.type=='owner'">群主</span>
						<span class="btn_green" v-if="m.type=='manager'">管理员</span>
						<span class="btn_blue" v-if='m.isvip==1'>计划员</span>
						<span class="btn_grey" v-if="m.is_deny==1">禁言</span>
						<span class="nickname">
							<block v-if="m.name!=m.nickname">
								{{m.nickname}}
							</block>
							<block v-else> {{m.name}}</block>
						</span>
						<input type="text" class="markname" :value="m.nickname">
						<view class="menu_tabs" v-if="m.menu">
							<block v-for="(m1,index1) in menu_tabs" :key="'tabs'+index1">
								<view @tap="user_setmenu(m1.type)">{{m1.text}}</view>
							</block>
						</view>
					</li>
					<li v-else>
						<input type="text" class="rename" v-if="m.name!=m.nickname" v-model="m.nickname"
							focus="true" />
						<input type="text" class="rename" v-else v-model="m.name" focus="true" />
						<view class="btn" @tap="sub_rename(m.id)">确定</view>
						<view class="btn_cancle" @tap="m.nameset=false">取消</view>
					</li>
					<li v-if="!m.nameset">
						<view v-if="m.id==userid && (group.is_mark==1 || isOwner==1 || is_manager==1 )" class="btn"
							@tap="user_rename(m.id);">修改名片</view>
						<view v-if="(isOwner==1 && m.type!='owner') || (is_manager==1 && m.type=='user')"
							class="btn" @tap="show_usermenu(m)">操作</view>
					</li>
				</ul>
			</block>
			
	
			<view  class="nodata">
				共有{{group.people_count}}人
			</view>
		</view>
	</view>
</template>

<script>
	import action from "@/library/action.js"
	import http from "@/library/http.js"
	import api from "@/library/index.js"
	import noteadd from '@/components/noteadd.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components:{noteadd,uniIcons},
		data() {
			return {
				option:{},
				userid:uni.getStorageSync('access_token'),
				members: [],
				isin: 0,
				group:{},
				noteadd:false,
				note_add:false,
				group_id: 0,
				managenum: 0,
				isOwner: false,
				is_manager: false,
			}
		},
		onLoad(option) {
			console.log('999999999999999999999999',option,this.userid)
			this.option = option
			this.group_id = option.id
			this.group = uni.getStorageSync('group_' + option.group_id);;
			this.group_set(this.group);
			this.getGroupUsers()
			this.getGroupInfo() 
		},
		onShow() {
			this.getGroupUsers()
			
		},
		methods: {
			lookMember(e) {
				return this.$jump('friend.detail', {
					id: e.id,
					from: 'group',
					'group_id': this.group_id
				});
			},
			user_setmenu(type) {
				console.log('设置管理员',type)
				var user = [];
				var isin = 0;
				var nickname = "";
				for (var i = 0; i < this.members.length; i++) {
					if (this.members[i].id == this.menu_id) {
						isin = 1;
						user = this.members[i];
						if (user.name == user.nickname) nickname = user.name;
						else nickname = user.nickname;
						this.members[i].menu = false
						this.members[i].nameset = false;
						break;
					}
			
				}
				var that = this;
				if (isin == 1) {
					//设为管理
					if (type == 'manage') {
						if (user.type == 'manager') {
							var tips = "是否要取消[" + nickname + "]的管理权限？";
							var settype = 0;
						} else {
							var tips = "是否要将[" + nickname + "]设为管理？";
							var settype = 1;
						}
			
						uni.showModal({
							title: '提示',
							content: tips,
							success: function(res) {
								if (res.confirm) {
									var data = {
										type: 'groupset1',
										mode: 'manage',
										settype: settype,
										group_id: that.group_id,
										userid: that.menu_id,
										from_uid: that.userid
									};
									that.$socket.send(data);
			
								} else if (res.cancel) {
			
								}
							}
						});
					}
			
			
					//禁言
					if (type == 'deny') {
						if (user.is_deny == 1) {
							var settype = 0;
							var tips = "是否要解除[" + nickname + "]禁言？";
						} else {
							var settype = 1;
							var tips = "是否要将[" + nickname + "]禁言？";
						}
			
						uni.showModal({
							title: '禁言提示',
							content: tips,
							success: function(res) {
								if (res.confirm) {
									var data = {
										type: 'groupset1',
										mode: 'deny',
										settype: settype,
										group_id: that.group_id,
										userid: that.menu_id,
										from_uid: that.userid
									};
									console.log(data);
									that.$socket.send(data);
								}
							}
						});
					}
			
					//踢人
					if (type == 'delete') {
						var tips="是否要将["+nickname+"]移除本群？";
						  uni.showModal({
						      title: '踢人提示',
						      content: tips,
						      success: function (res) {
						          if (res.confirm) {
						            var data={type:'deleteGroup',group_id:that.group_id,userid:that.menu_id,fromid:that.userid};
						             that.$socket.send(data);  
						          }
						      }
						  });
						this.showlogout = true;
						this.logoutinfo = {
							group_id: this.group_id,
							userid: this.menu_id,
							nickname: nickname
						};
					}
				}
				this.getGroupUsers()
				this.getGroupInfo()
			},
			group_set(result) {
				var that = this;
				console.log('9999988888',result);
				that.isOwner = result.owner;
				that.is_manager = result.is_manager;
				that.isin = result.isin;
			},
			imgshow(image_url) {
				if (image_url.indexOf('http') <= -1) image_url = config.imgUri + image_url;
				return this.image_cache(image_url)
			},
			show_usermenu(m) {
				for (var i = 0; i < this.members.length; i++) {
					if (this.members[i].id != m.id) this.members[i].menu = false
				}
			
				m.menu = !m.menu;
				this.menu_id = m.id;
				var menu_tabs = [];
				if (this.isOwner == 1) {
					if (m.type != 'owner') {
						if (m.type == 'manager') menu_tabs.push({
							'type': 'manage',
							'text': '取消管理'
						});
						else menu_tabs.push({
							'type': 'manage',
							'text': '设为管理'
						});
						if (m.is_deny == 1) menu_tabs.push({
							'type': 'deny',
							'text': '解除禁言'
						});
						else menu_tabs.push({
							'type': 'deny',
							'text': '禁言'
						});
						menu_tabs.push({
							'type': 'delete',
							'text': '踢人'
						});
					}
					menu_tabs.push({
						'type': 'update',
						'text': '修改名片'
					});
					menu_tabs.push({
						'type': 'view',
						'text': '查看资料'
					});
				} else if (this.is_manager == 1) {
					if (m.type == 'user') {
						if (m.is_deny == 1) menu_tabs.push({
							'type': 'deny',
							'text': '解除禁言'
						});
						else menu_tabs.push({
							'type': 'deny',
							'text': '禁言'
						});
						menu_tabs.push({
							'type': 'delete',
							'text': '踢人'
						});
						menu_tabs.push({
							'type': 'update',
							'text': '修改名片'
						});
						menu_tabs.push({
							'type': 'view',
							'text': '查看资料'
						});
					} else {
						menu_tabs.push({
							'type': 'view',
							'text': '查看资料'
						});
					}
				}
			
				this.menu_tabs = menu_tabs;
			},
			getGroupUsers() {
			
				this.users_set(uni.getStorageSync(this.group_id + '_group_members'))
				api.getGroupUsers({
					group_id: this.group_id,
					userid: this.userid,
				}).then(res => {
					this.users_set(res.data);
				})
			},
			getGroupInfo() {
				let that = this;
			
				api.getGroupInfo({
					group_id: this.group_id,
					from_id: this.userid
				}).then(res => {
					let result = res.data;
					this.group_set(result);
			
			
				})
			},
			users_set(data) {
			
				var num = 0;
				for (var i = 0; i < data.length; i++) {
					var item = data[i];
					if (item.type == 'owner' || item.type == 'manager') num++;
					item.menu = false;
					item.nameset = false;
					data[i] = item
				}
				this.managenum = num;
				uni.setStorageSync(this.group_id + '_group_members', data);
				this.members = data;
				console.log('打印这个',data)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/group.css";
	$avatarWidth: 50px;
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('/static/fonts/uni.ttf') format('truetype');
	}
	
	page {
		background: #e5e5e5;
	}
	
	.uni-navigate-right:after {
		font-family: uniicons;
		content: '\e583';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.uni-navigate-bottom:after {
		font-family: uniicons;
		content: '\e581';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.uni-navigate-bottom.uni-active::after {
		font-family: uniicons;
		content: '\e580';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	
	
	.members {
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		justify-content: flex-start;
		background-color: #fff;
	}
	
	.member {
	
		display: inline-block;
		flex-direction: column;
		align-items: center;
		text-align: center;
		justify-content: flex-start;
		text-align: center;
	
		.avatar {
			display: block;
			margin: 0 auto;
			width: $avatarWidth;
			height: $avatarWidth;
			border-radius: $uni-border-radius-base;
			background: rgba(0, 0, 0, 0.05);
	
			&.emoji {
				text-align: center;
				border: 1rpx solid #e5e5e5;
				// background-color: #eee;
				font-size: 45upx;
				line-height: $avatarWidth;
				color: #999;
			}
		}
	
		text {
			width: $avatarWidth;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			font-size: 28upx;
			color: #999;
		}
	}
	
	.notice {
		width: 500upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.btn-wrapper {
		margin-top: $uni-spacing-col-base;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	}
	
	.fromInput {
		text-align: right;
		font-size: 32upx;
		color: #777;
	}
	
	.page {
		font-size: 14px;
		;
	}
	
	.loading {
		//loading动画
		display: flex;
		justify-content: center;
	
		@keyframes stretchdelay {
	
			0%,
			40%,
			100% {
				transform: scaleY(0.6);
			}
	
			20% {
				transform: scaleY(1.0);
			}
		}
	
		.spinner {
			margin: 20upx 0;
			width: 60upx;
			height: 25px;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			view {
				background-color: #ff9800;
				height: 25px;
				width: 3px;
				border-radius: 3px;
				animation: stretchdelay 1.2s infinite ease-in-out;
			}
	
			.rect2 {
				animation-delay: -1.1s;
			}
	
			.rect3 {
				animation-delay: -1.0s;
			}
	
			.rect4 {
				animation-delay: -0.9s;
			}
	
			.rect5 {
				animation-delay: -0.8s;
			}
		}
	}
</style>